import React from 'react';
import 'date-fns';
import zhLocale from "date-fns/locale/zh-CN";
import DateFnsUtils from '@date-io/date-fns';
import { KeyboardDateTimePicker, MuiPickersUtilsProvider } from '@material-ui/pickers';
import { loc, obj_date, obj_str } from 'sui';

const get_loc = () => zhLocale;

const IkRangeDate = ({ name_s, name_e, form, value, disabled=false, format="yyyy-MM-dd HH:mm" }) => {
    return (
        <MuiPickersUtilsProvider utils={DateFnsUtils} locale={get_loc()}>
            <div className="mr-6">
                <KeyboardDateTimePicker
                    format={format}
                    disabled={disabled}
                    label={loc("l_529")}
                    error={Boolean(form.err[name_s])}
                    helperText={obj_str(form.err, name_s)}
                    value={obj_date(value, name_s)}
                    ampm={false}
                    inputVariant="outlined"
                    margin="normal"
                    id="date-start"
                    name="date-start"
                    cancelLabel={loc("l_546")}
                    okLabel={loc("l_541")}
                    clearable={false}
                    onChange={v => form.hcmd(name_s, v)}/>
            </div>
            <div className="mr-6">
                <KeyboardDateTimePicker
                    format={format}
                    disabled={disabled}
                    label={loc("l_528")}
                    error={Boolean(form.err[name_e])}
                    helperText={obj_str(form.err, name_e)}
                    value={obj_date(value, name_e)}
                    ampm={false}
                    inputVariant="outlined"
                    margin="normal"
                    id="date-end"
                    name="date-end"
                    cancelLabel={loc("l_546")}
                    okLabel={loc("l_541")}
                    clearable={false}
                    onChange={v => form.hcmd(name_e, v)}/>
            </div>
        </MuiPickersUtilsProvider>
    );
};

export {IkRangeDate};
